<template>
  <div id="create-lesson-page">
    <!-- 视频上传开始 -->
    <div style="margin-top: 30px" class="upload-video content">
      <div class="title">视频上传</div>
      <div class="video-list">
        <div class="video-item" v-for="i of 5" :key="i">
          <img
            src="https://t7.baidu.com/it/u=2488490742,1686455852&fm=193&f=GIF"
            alt=""
          />
          <div class="name">天下第一天下第一天下第一天下第一</div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="upload-btn">
        <el-button type="primary">上传</el-button>
      </div>
    </div>
    <!-- 视频上传结束 -->
    <!-- 基本信息填写开始 -->
    <div class="video-info content">
      <div class="title">
        基础信息
        <el-button size="mini" style="margin-left: 6.5%">一键填写</el-button>
      </div>
      <!-- 基本信息表单 -->
      <div class="info-form">
        <div class="label">封面</div>
        <div class="content">
          <img
            src="https://t7.baidu.com/it/u=2859906941,1154696622&fm=193&f=GIF"
            alt=""
          />
        </div>
      </div>

      <div class="info-form">
        <div class="label">视频集标题</div>
        <div class="content">
          <el-input maxlength="60" show-word-limit />
        </div>
      </div>

      <div class="info-form">
        <div class="label">视频集标签</div>
        <div class="content">
          <el-tag
            style="margin-right: 10px"
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type"
          >
            {{ tag.name }}
          </el-tag>
          <el-input style="margin:10px 0;" placeholder="回车添加标签" />

        </div>
      </div>

      <div class="info-form">
        <div class="label">简介</div>
        <div class="content">
          <el-input type="textarea" maxlength="300" show-word-limit> </el-input>
        </div>
      </div>

      <div class="info-form">
        <div class="label">费用</div>
        <div class="content">
          <el-input type="number" />
        </div>
      </div>
    </div>
    <!-- 基本信息填写结束 -->

    <!-- 确认上传 -->
    <div class="confirm-btn">
      <el-button type="primary" round>确认上传</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
      ],
    };
  },
};
</script>

<style scoped>
#create-lesson-page .content {
  background-color: #fff;
  border-radius: 10px;
  width: 85%;
  margin: 0 auto;
  padding: 10px;
}

#create-lesson-page .content .title {
  font-size: 18px;
  line-height: 36px;
  font-weight: bolder;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#create-lesson-page .upload-video .upload-btn {
  display: flex;
  display: -webkit-flex;
  justify-content: end;
}

#create-lesson-page .upload-video .video-list {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  flex-wrap: wrap;
}

#create-lesson-page .upload-video .video-list .video-item {
  width: 100px;
  height: 100px;
  margin: 5px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: gray;
}

#create-lesson-page .upload-video .video-list .video-item .name {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出div的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}

#create-lesson-page .upload-video .video-list img {
  width: 100px;
  height: 100px;
  border-radius: 2px;
}

#create-lesson-page .video-info {
  margin-top: 40px;
  margin-bottom: 40px;
}

#create-lesson-page .video-info .info-form {
  display: flex;
  display: -webkit-flex;
  justify-content: start;
  align-items: center;
}

#create-lesson-page .video-info .info-form .label {
  width: 10%;
  font-size: 16px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

#create-lesson-page .video-info .info-form .content {
}

#create-lesson-page .video-info .info-form .content img {
  width: 150px;
  height: 130px;
  border-radius: 5px;
  cursor: pointer;
}

#create-lesson-page .confirm-btn {
  width: 85%;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: end;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 40px;
}
</style>